<template>
  <el-dialog
    ref="commentDialogRef"
    :visible="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :class="{'mobile-el-dialog':showMobilePage}"
    modal-append-to-body
    class="xs-common-dialog-size tip-dialog"
  >
    <div class="img">
      <el-image :src="type === 1? successIcon : failIcon"/>
    </div>
    <div class="content">
      <div v-if="type === 1">
        <p>恭喜~所有结算已成功发起审批</p>
        <p>进度：{{ `${batchSettleInfo.successAccountNum}/${batchSettleInfo.total}` }}</p>
      </div>
      <div v-else>
        <div class="text">
          <p>{{ `已成功发起${batchSettleInfo.successAccountNum}个账号付款申请（共` }}<span class="link-text" @click="toSupplier">{{ batchSettleInfo.successNum }}</span>个结算单）</p>
          <p>其中<span class="red-text">{{ batchSettleInfo.failAccountNum }}</span>个账号失败（共{{ batchSettleInfo.failNum }}个结算单）</p>
          <p>请通过手动发起查看原因，进度：<span class="red-text">{{ batchSettleInfo.successAccountNum }}</span>{{ `/${batchSettleInfo.total}` }}</p>
        </div>
      </div>
    </div>
    <div v-if="batchSettleInfo.failAccountNum">错误信息：</div>
    <template v-if="!type" >
      <div class="err-message" v-html="errMsg"/>
      <div class="footer-action-btn">
        <el-button type="primary" size="small" @click="handleSubmit">{{ type === 1 ? '前往查看' : '继续手动处理' }}</el-button>
      </div>
    </template>
    <el-row v-else-if="batchSettleInfo.result && batchSettleInfo.result.length" :gutter="10" class="success-result">
      <el-col v-for="item in batchSettleInfo.result" :span="12" :key="item.id" class="result-item">
        <ToolTip :content="`${item.settleName}${item.status === -2?'（草稿中）':''}`" is-can-click @handelClick="toDetail(item)" />
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import SelectCustomUser from '@/views/legal/process/model/selectCustomUser';
import upAttachment from '@/components/Common/upAttachment/index';
import DialogTitle from '@/components/Title';
import { mapState } from 'vuex';
import successIcon from '@/assets/todo/settle-success.png';
import failIcon from '@/assets/todo/settle-fail.png';
import { encryption } from '@/utils';

export default {
  name: 'CommentDialog',
  components: {
    SelectCustomUser,
    upAttachment,
    DialogTitle
  },
  props: {
    batchSettleInfo: {
      type: Object,
      default: () => ({
        settleOrderNum: 0,
        failNum: 0,
        successNum: 0,
        total: 0
      })
    }
  },
  data() {
    return {
      type: 0, // 0失败弹窗，1成功弹窗
      successIcon,
      failIcon,
      ids: '',
      dialogVisible: false,
      errMsg: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    openDialog(type, errMsg = '') {
      this.type = type;
      if (type === 0 && errMsg) { this.errMsg = errMsg.replace(/\n/g, '<br>'); }
      this.dialogVisible = true;
    },
    handleSubmit() {
      if (this.type === 1) {
        this.toSupplier();
      } else {
        this.$emit('searchFailAccount', this.batchSettleInfo.failAccountName);
      }
      this.handleClose();
    },
    toSupplier() {
      const { taskTimeStart, taskTimeEnd } = this.batchSettleInfo;
      const routeUrl = this.$router.resolve({
        name: 'supplier',
        query: {
          taskTimeStart,
          taskTimeEnd,
          userName: this.userInfo.userName
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    handleClose() {
      this.dialogVisible = false;
    },
    toDetail(item) {
      const query = {
        settleId: item.id,
        id: item.supplierId,
        isSettle: true
      };
      if (item.isInvite) {
        query.isInvite = encryption(item.id);
      }
      const routeUrl = this.$router.resolve({
        name: 'supplierDetail',
        query
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style scoped lang="scss">
.tip-dialog {
  ::v-deep .el-dialog__body {
    // height: 290px;
    padding: 16px 24px 24px 24px !important;
  }
  .img {
    display: flex;
    justify-content: center;
    ::v-deep .el-image {
      width: 148px;
      height: 148px;
    }
  }
  .content {
    margin: 12px 0 16px 0;
    .text {
      text-align: center;
      p {
        text-align: center;
        margin: 12px 0;
      }
    }
    font-size: 14px;
    font-family: PingFangSC-Medium;
    text-align: center;
    color: #333333;
    line-height: 20px;
    font-weight: 600;
    .link-text {
      color: #406EFF;
      cursor: pointer;
    }
    .red-text {
      color: #FF4E5F;
    }
  }
  .footer-action-btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .err-message {
    max-height: 150px;
    overflow-y: auto;
    color: #FF4E5F;
    font-size: 14px;
  }
}
.success-result {
  max-height: 90px;
  @include scrollBar($y:auto,$width: 6px);
  .result-item {
    margin-bottom: 3px;
  }
}
</style>
